// Vue.js 前端调用示例

// 1. 使用 axios 的示例
import axios from 'axios'

// 创建axios实例
const api = axios.create({
  baseURL: 'http://localhost:8000',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  }
})

// API函数
export const treeAPI = {
  // 获取所有树木数据
  getAllTrees: async (skip = 0, limit = 100) => {
    try {
      const response = await api.get(`/trees/?skip=${skip}&limit=${limit}`)
      return response.data
    } catch (error) {
      console.error('获取树木数据失败:', error)
      throw error
    }
  },

  // 获取单个树木数据
  getTreeById: async (sampleId) => {
    try {
      const response = await api.get(`/trees/${sampleId}`)
      return response.data
    } catch (error) {
      console.error('获取树木数据失败:', error)
      throw error
    }
  }
}

// 2. 使用 fetch 的示例
export const treeFetchAPI = {
  // 获取所有树木数据
  getAllTrees: async (skip = 0, limit = 100) => {
    try {
      const response = await fetch(`http://localhost:8000/trees/?skip=${skip}&limit=${limit}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      })
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const data = await response.json()
      return data
    } catch (error) {
      console.error('获取树木数据失败:', error)
      throw error
    }
  },

  // 获取单个树木数据
  getTreeById: async (sampleId) => {
    try {
      const response = await fetch(`http://localhost:8000/trees/${sampleId}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      })
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const data = await response.json()
      return data
    } catch (error) {
      console.error('获取树木数据失败:', error)
      throw error
    }
  }
}

// 3. Vue 3 Composition API 使用示例
import { ref, onMounted } from 'vue'

export function useTrees() {
  const trees = ref([])
  const loading = ref(false)
  const error = ref(null)

  const fetchTrees = async () => {
    loading.value = true
    error.value = null
    
    try {
      const result = await treeAPI.getAllTrees()
      if (result.success) {
        trees.value = result.data
      } else {
        error.value = result.message
      }
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchTrees()
  })

  return {
    trees,
    loading,
    error,
    fetchTrees
  }
}

// 4. Vue 组件使用示例
/*
<template>
  <div>
    <h2>树木数据列表</h2>
    
    <div v-if="loading">加载中...</div>
    
    <div v-else-if="error" class="error">
      错误: {{ error }}
    </div>
    
    <div v-else>
      <div v-for="tree in trees" :key="tree.sample_id" class="tree-item">
        <h3>样本ID: {{ tree.sample_id }}</h3>
        <p>物种: {{ tree.species }}</p>
        <p>检查类型: {{ tree.inspection_type }}</p>
        <p>2024年直径: {{ tree.diameter_2024 }}cm</p>
        <p>2025年直径: {{ tree.diameter_2025 }}cm</p>
        <p>方位角: {{ tree.azimuth }}°</p>
        <p>水平距离: {{ tree.horizontal_distance }}m</p>
        <p>备注: {{ tree.note || '无' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useTrees } from './vue-example.js'

const { trees, loading, error } = useTrees()
</script>

<style scoped>
.tree-item {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
}

.error {
  color: red;
  padding: 10px;
  background-color: #ffe6e6;
  border-radius: 5px;
}
</style>
*/ 